@tailwind base;
@tailwind components;
@tailwind utilities;

:host, body {
  font-family: 'Inter var';
  font-size: 16px;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  @apply bg-gray-50 dark:bg-gray-900 leading-normal;
}
table th,
table td {
  @apply py-2 px-4;
}
input:focus,
button:focus,
textarea:focus,
select:focus,
[role='button']:focus {
  outline: none;
  @apply ring-2 ring-accent dark:ring-gray-200;
}

.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scroll::-webkit-scrollbar {
  width: 7px;
  height: 9px;
}
.scroll::-webkit-scrollbar-thumb {
  @apply bg-gray-300 dark:bg-gray-700;
  border-radius: 8px;
}
.scroll::-webkit-scrollbar-track {
  background: transparent;
}
.tippy-box[data-theme~='tooltip-theme'] {
  @apply px-2 py-1 bg-gray-900 text-sm text-gray-200 rounded-md;
}

@layer utilities {
  .hoverable {
    @apply hover:bg-gray-800 hover:bg-opacity-5 dark:hover:bg-gray-200 dark:hover:bg-opacity-5;
  }
  .bg-input {
    @apply bg-black bg-opacity-5 hover:bg-opacity-10 dark:bg-gray-200 dark:bg-opacity-5 dark:hover:bg-opacity-10;
  }
  .bg-box-transparent {
    @apply bg-black bg-opacity-5 dark:bg-gray-200 dark:bg-opacity-5;
  }
  .bg-box-transparent-2 {
    @apply bg-black bg-opacity-10 dark:bg-gray-200 dark:bg-opacity-10;
  }
}
